<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
    <title>Document</title>
</head>

<style>
    /* 设置地图容器宽高 */
    #map {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    * {
        /* CSS Reset */
        margin: 0;
        padding: 0;
    }

    .List {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0vw;
        margin-top: 0vh;
        width: 16vw;
        height: 100vh;
        background-color: white;
        border-right-style: solid;
        z-index: 9999;
    }

    .title {
        /* position: absolute; */
        margin-left: 1vw;
        margin-top: 3vh;
        width: 14vw;
        text-align: center;
    }

    .title-text {
        font-family: "Microsoft YaHei";
        font-weight: bold;
    }

    .map-zoom {
        position: relative;
        top: 30px;
    }
</style>

<body>
    <!-- 功能列表 -->
    <div class="List">
        <!-- 标题 -->
        <div class="title">
            <span class="title-text">WebGIS:Web地图显示与交互实习</span>
        </div>
        <!-- 地图缩放 -->
        <div class="map-zoom">
            <p>地图缩放(zoom):</p>
            <input id="zoom_input" type="text" value="16" style="font-size: 16px;">
            <button style="width: 50px; font-size: 16px;" onclick="check_zoom()">确认</button>
        </div>
        <!-- 比例尺 -->
    </div>
    <!-- 地图容器 -->
    <div id="map">
        <div id="digitalScale"><span>比例尺1：</span><span id="zoom"></span></div>
    </div>
    <!-- 引入 ol.js -->
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <script>
        var zoom_number = 16;
        var scaleLineControl = new ol.control.ScaleLine();//定义比例尺控件
        //实例化map对象加载地图
        var map = new ol.Map({
            //地图容器div的id 
            target: 'map',
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=c3ff30f2fa60e8444d23c3597a297bb6",
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量图层注记",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c3ff30f2fa60e8444d23c3597a297bb6",
                        wrapX: false
                    })
                })
            ],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.transform([103.986241, 30.764382], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
                //地图初始显示级别
                zoom: zoom_number
            }),
            controls: ol.control.defaults().extend([scaleLineControl])//加载比例尺控件
        });

        // 修改缩放等级
        function check_zoom() {
            zoom_number = document.getElementById("zoom_input").value;
            const view = this.map.getView();
            view.setZoom(zoom_number)
        }

        // 获取比例尺
        // 监听分辨率变化，通过dpi和像素关系（比例尺=dpi/0.0254*分辨率）输出比例尺
        map.getView().on('change:resolution', function () {
            document.getElementById('zoom').innerHTML = (this.getResolution()) * 3779.5275590551;//这里使用了View中的getResolution方法获得当前View的分辨率。
        });
    </script>
</body>



</html>